<template>
  <div class="wedding-website">
    <!-- 头部导航 -->
    <el-header class="header">
      <div class="container">
        <div class="logo">
          <h1>缘定今生</h1>
        </div>
        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
          background-color="#c00"
          text-color="#fff"
          active-text-color="#ffd04b">
          <el-menu-item index="1">首页</el-menu-item>
          <el-menu-item index="2">会员中心</el-menu-item>
          <el-menu-item index="3">成功案例</el-menu-item>
          <el-menu-item index="4">关于我们</el-menu-item>
        </el-menu>
      </div>
    </el-header>

    <!-- 主要内容区域 -->
    <div class="main-content">
      <!-- 轮播图 -->
      <el-carousel height="500px" class="carousel">
        <el-carousel-item v-for="item in 4" :key="item">
          <div class="carousel-item">
            <img :src="`https://picsum.photos/1200/500?random=${item}`" alt="婚恋图片">
            <div class="carousel-text">
              <h2>寻找生命中的另一半</h2>
              <p>在这里，遇见真爱</p>
              <el-button type="danger" size="large" @click="handleRegister">立即注册</el-button>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>

      <!-- 搜索区域 -->
      <div class="search-section">
        <div class="container">
          <h2>寻找你的有缘人</h2>
          <el-form :inline="true" class="search-form">
            <el-form-item>
              <el-select v-model="searchForm.gender" placeholder="性别">
                <el-option label="男性" value="male"></el-option>
                <el-option label="女性" value="female"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select v-model="searchForm.age" placeholder="年龄">
                <el-option label="20-30岁" value="20-30"></el-option>
                <el-option label="31-40岁" value="31-40"></el-option>
                <el-option label="41-50岁" value="41-50"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select v-model="searchForm.location" placeholder="地区">
                <el-option label="北京" value="beijing"></el-option>
                <el-option label="上海" value="shanghai"></el-option>
                <el-option label="广州" value="guangzhou"></el-option>
                <el-option label="深圳" value="shenzhen"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="danger" icon="el-icon-search" @click="handleSearch">搜索</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>

      <!-- 会员推荐 -->
      <div class="members-section">
        <div class="container">
          <h2 class="section-title">优质会员推荐</h2>
          <el-row :gutter="20">
            <el-col :span="6" v-for="member in members" :key="member.id" :xs="24" :sm="12" :md="6">
              <div class="member-card">
                <div class="member-avatar">
                  <img :src="member.avatar" :alt="member.name">
                </div>
                <div class="member-info">
                  <h3>{{ member.name }}</h3>
                  <p>{{ member.age }}岁 | {{ member.location }}</p>
                  <p>{{ member.occupation }}</p>
                  <el-button type="danger" size="small" @click="viewProfile(member.id)">查看资料</el-button>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>

      <!-- 成功案例 -->
      <div class="success-stories">
        <div class="container">
          <h2 class="section-title">成功案例</h2>
          <el-row :gutter="20">
            <el-col :span="8" v-for="story in stories" :key="story.id" :xs="24" :sm="12" :md="8">
              <div class="story-card">
                <img :src="story.image" :alt="story.title">
                <div class="story-content">
                  <h3>{{ story.title }}</h3>
                  <p>{{ story.content }}</p>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>

    <!-- 底部 -->
    <el-footer class="footer">
      <div class="container">
        <p>© 2023 缘定今生婚恋网 版权所有</p>
        <p>联系电话：400-888-8888 | 邮箱：contact@yuan.com</p>
      </div>
    </el-footer>
  </div>
</template>

<script>
export default {
  name: 'WeddingWebsite',
  data() {
    return {
      activeIndex: '1',
      searchForm: {
        gender: '',
        age: '',
        location: ''
      },
      members: [
        {
          id: 1,
          name: '张小姐',
          age: 28,
          location: '北京',
          occupation: '设计师',
          avatar: 'https://picsum.photos/300/300?random=1'
        },
        {
          id: 2,
          name: '李先生',
          age: 32,
          location: '上海',
          occupation: '工程师',
          avatar: 'https://picsum.photos/300/300?random=2'
        },
        {
          id: 3,
          name: '王女士',
          age: 26,
          location: '广州',
          occupation: '教师',
          avatar: 'https://picsum.photos/300/300?random=3'
        },
        {
          id: 4,
          name: '刘先生',
          age: 30,
          location: '深圳',
          occupation: '医生',
          avatar: 'https://picsum.photos/300/300?random=4'
        }
      ],
      stories: [
        {
          id: 1,
          title: '从相识到结婚',
          content: '通过平台相识，一年后步入婚姻殿堂',
          image: 'https://picsum.photos/400/250?random=5'
        },
        {
          id: 2,
          title: '异地恋修成正果',
          content: '跨越千里的爱情，最终走到一起',
          image: 'https://picsum.photos/400/250?random=6'
        },
        {
          id: 3,
          title: '中年再婚幸福美满',
          content: '五十岁的爱情同样精彩动人',
          image: 'https://picsum.photos/400/250?random=7'
        }
      ]
    }
  },
  methods: {
    handleSelect(key) {
      console.log('选中菜单项:', key);
    },
    handleSearch() {
      console.log('搜索条件:', this.searchForm);
      this.$message.success('搜索功能已触发');
    },
    handleRegister() {
      this.$message.success('注册功能已触发');
    },
    viewProfile(id) {
      this.$message.info(`查看会员${id}的资料`);
    }
  }
}
</script>

<style scoped>
.wedding-website {
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', Arial, sans-serif;
  background-color: #fff;
  color: #333;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 头部样式 */
.header {
  background-color: #c00;
  color: white;
  padding: 0;
  box-shadow: 0 2px 4px rgba(0,0,0,.1);
}

.header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo h1 {
  margin: 0;
  font-size: 24px;
  color: white;
}

.el-menu-demo {
  border: none;
}

/* 轮播图样式 */
.carousel {
  position: relative;
}

.carousel-item {
  position: relative;
  height: 100%;
}

.carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carousel-text {
  position: absolute;
  top: 50%;
  left: 10%;
  transform: translateY(-50%);
  color: white;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

.carousel-text h2 {
  font-size: 36px;
  margin-bottom: 10px;
}

.carousel-text p {
  font-size: 20px;
  margin-bottom: 20px;
}

/* 搜索区域样式 */
.search-section {
  background-color: #f8f8f8;
  padding: 40px 0;
  text-align: center;
}

.search-section h2 {
  color: #c00;
  margin-bottom: 30px;
  font-size: 32px;
}

.search-form {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 15px;
}

/* 会员推荐样式 */
.members-section {
  padding: 60px 0;
  background-color: #fff;
}

.section-title {
  text-align: center;
  color: #c00;
  font-size: 32px;
  margin-bottom: 40px;
}

.member-card {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
  margin-bottom: 20px;
}

.member-card:hover {
  transform: translateY(-5px);
}

.member-avatar {
  height: 200px;
  overflow: hidden;
}

.member-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.member-info {
  padding: 15px;
  text-align: center;
}

.member-info h3 {
  margin: 0 0 10px 0;
  color: #333;
}

.member-info p {
  margin: 5px 0;
  color: #666;
  font-size: 14px;
}

/* 成功案例样式 */
.success-stories {
  padding: 60px 0;
  background-color: #f8f8f8;
}

.story-card {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.story-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.story-content {
  padding: 20px;
}

.story-content h3 {
  margin-top: 0;
  color: #c00;
}

/* 底部样式 */
.footer {
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 30px 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .header .container {
    flex-direction: column;
  }
  
  .logo {
    padding: 15px 0;
  }
  
  .carousel-text h2 {
    font-size: 24px;
  }
  
  .carousel-text p {
    font-size: 16px;
  }
  
  .search-form {
    flex-direction: column;
    align-items: center;
  }
  
  .section-title {
    font-size: 24px;
  }
}
</style>